<template>
  <div>
    <h2>{{ newsInfo.title }}</h2>
    <div v-html="newsInfo.content"></div>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { reactive, toRefs } from "vue";
import { newsDetail } from "../../utils/home.js";
// 获取详情页数据的
export default {
  setup(props) {
    const route = useRoute();
    const id = route.params.id;
    const data = reactive({
      // id:route.params.id
      // 也可以在reactive里接收

      newsInfo: "",
      // 保存文章详情数据
    });
    //把从列表页 路由跳转时候传过来的id 再传到后台 请求这个id下 的文章详情数据
    newsDetail({ id: id }).then((res) => {
      console.log(res);
      data.newsInfo = res.data;
    });
    //获取文章详情页的数据

    return { ...toRefs(data) };
  },
};
</script>
